<template>
  <div class="container">
    <div class="dashboard-container">
      <div class="dashboard-text">欢迎使用物业管理系统</div>
    </div>
    <div class="marquee">
      <div class="block">
        <el-carousel :interval="4000" type="card" height="400px">
          <el-carousel-item v-for="(item, index) in imageList" :key="index">
            <div class="marquee-item">
              <img class="img" :src="item.img" alt="Image">
              <div class="marquee-item-content">
                <div class="content">{{ item.content }}</div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import bg1 from '@/assets/images/1.jpg'
import bg2 from '@/assets/images/2.jpg'
import bg3 from '@/assets/images/3.png'
export default {
  name: 'Dashboard',
  data() {
    return {
      imageList: [
        {
          content: '一尘不染的环境，舒适惬意的生活。',
          img: bg1
        },
        {
          content: '服务提高生活品质，物管改变行为习惯。',
          img: bg2
        }, {
          content: '实现社会和谐，建设美好家园。',
          img: bg3
        }, {
          content: '物业管理服务于您，让您安居乐业。',
          img: bg1
        }, {
          content: '物业管理，有序参与，依法维权，互利互惠。',
          img: bg2
        }, {
          content: '您的家是温馨港湾，坚决做好业户好管家。',
          img: bg3
        }, {
          content: '营造美好环境，共创和谐社会。',
          img: bg1
        }, {
          content: '爱惜共用设施设备，节约您的维修资金。',
          img: bg2
        }, {
          content: '科学管理与时俱进，创优服务永无止境。',
          img: bg3
        }, {
          content: '全心全意为业主服务！创造美丽家园！',
          img: bg1
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    width: 600px;
    margin: 20px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.container {
  position: fixed;
  width: calc(100vw - 210px);
  height: 100vh;
  background: radial-gradient(circle at 45.67% 77.67%, #98CBC5 31.23%, #4E88E2 100%);
}

.marquee {
  margin: 10px 1% 0 1%;
  border-radius: 10px;
  width: 98%;
  height: 440px;
  background-color: skyblue;
  border: #000 solid 2px;

  .block {
    margin: 10px 10px 0 10px;

    .marquee-item {
      .img {
        z-index: 2;
        background-size: auto;
        width: 100%;
        height: 100%;
      }

      .marquee-item-content {
        position: absolute;
        bottom: 0;
        z-index: 3;
        width: 100%;
        height: 40px;
        opacity: 0.8;
        background-color: #000;
        .content{
          height: 100%;
          z-index: 4;
          margin-left: 4px;
          color: yellow;
          font-size: 30px;
          line-height: 40px;
        }
      }
    }
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
}
</style>
